<template>
  <Dialog
    v-model="dialogVisible"
    title="列表字段设置"
    class="table-custom-view"
    width="900px"
  >
    <p>共 {{ sourceColumns.length }} 个字段</p>

    <Table
      ref="TableRef"
      :tableCustom="false"
      :columns="columns"
      v-model:data="customColumns"
      :drag="drag"
      row-key="label"
      default-expand-all
    >
      <template #visible="{ row }">
        <el-switch
          :model-value="row.visible ?? true"
          inline-prompt
          active-text="是"
          inactive-text="否"
          @update:model-value="(visible: boolean) => row.visible = visible"
        />
      </template>
      <template #flexLeft="{ row, index }">
        <el-tooltip content="多级表头无法固定列" :disabled="!commonCustom.isChildren(row)">
          <el-switch
            :model-value="row.fixed === true || row.fixed === 'left'"
            :disabled="commonCustom.isChildren(row)"
            inline-prompt
            active-text="是"
            inactive-text="否"
            @update:model-value="(flag: boolean) => commonCustom.swicthFixed(row, index, 'left', flag)"
          />
        </el-tooltip>
      </template>
      <template #flexRight="{ row, index }">
        <el-tooltip content="多级表头无法固定列" :disabled="!commonCustom.isChildren(row)">
          <el-switch
            :model-value="row.fixed === true || row.fixed === 'right'"
            :disabled="commonCustom.isChildren(row)"
            inline-prompt
            active-text="是"
            inactive-text="否"
            @update:model-value="(flag: boolean) => commonCustom.swicthFixed(row, index, 'right', flag)"
          />
        </el-tooltip>
      </template>
      <template #operate="{ row, index }">
        <el-button
          type="primary" link
          :disabled="commonCustom.isDisabledMove(row).up"
          @click="commonCustom.moveUp(row, index)"
        >
        <Icon icon="ph:arrow-up-bold" /> 上移
        </el-button>

        <el-button
          type="primary" link
          :disabled="commonCustom.isDisabledMove(row).down"
          @click="commonCustom.moveDown(row, index)"
        >
        <Icon icon="ph:arrow-down-bold" />下移
        </el-button>

        <el-button
          type="primary" link
          :disabled="commonCustom.isDisabledMove(row).top"
          @click="commonCustom.moveTop(row, index)"
        >
          <Icon icon="icon-park-outline:to-top"/> 置顶
        </el-button>

        <el-button
          type="primary" link
          :disabled="commonCustom.isDisabledMove(row).bottom"
          @click="commonCustom.moveBottom(row, index)"
        >
          <Icon icon="icon-park-outline:to-bottom"/> 置底
        </el-button>
      </template>
    </Table>
    <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="initColumns">重置</el-button>
          <el-button type="primary" @click="saveConfig">保存设置</el-button>
      </template>
  </Dialog>
</template>


<script setup lang="ts" name="TableCustomView">

  import '../style/index.scss'
  import { h, ref, useAttrs, useSlots, SlotsType, nextTick  } from "vue";
  import { Dialog, Table, Icon } from "@/components"
  import { VueDraggableProps, TableColumnItem } from "@/components"
  import { ElSwitch, ElButton, ElTooltip } from "element-plus"
  import { useTableCustom  } from '../utils/useTableCustom'
  import { cloneDeep } from 'lodash'
  const slots:SlotsType  = useSlots()
  const attrs = useAttrs()
  const props = defineProps<{
      // 字段列表
      sourceColumns: TableColumnItem[]
  }>()
  const emit = defineEmits<{
      (e: 'update:custom-columns', newColumns: TableColumnItem[])
  }>()

  const TableRef = ref<InstanceType<typeof Table>>()
  const dialogVisible = ref(false)


  // 锁定的列 不参与自定义配置
  const lockTypes: string[] = ['index', 'selection', 'expand']
  const lockColumns = ref<TableColumnItem[]>()
  // 自定义列
  const customColumns = ref<TableColumnItem[]>()

  const columns: TableColumnItem[] = [
    {
      type: 'drag',
      width: '80px',
      align: 'center'
    },
    {
      label: '字段名称',
      prop: 'label',
      minWidth: '120px',
      render: (row, column, cellValue, index) => {
        return row?.renderHeader?.({column, index})     // render
          ?? slots[row?.slotHeader]?.({column, index})  // 插槽
          ?? row?.label                                 // label
      }
    },
    {
      label: '是否显示',
      slot: 'visible',
      align: 'center'
    },
    {
      label: '固定在左侧',
      slot: 'flexLeft',
      align: 'center'
    },
    {
      label: '固定在右侧',
      slot: 'flexRight',
      align: 'center'
    },
    {
      label: '显示顺序设置',
      slot: 'operate',
      align: 'center',
      minWidth: '200px'
    },
  ]


  // 初始化
  const initColumns = () => {
    let initLockColumns = []
    let initCustomColumns = []
    let columns: TableColumnItem[] = cloneDeep(props.sourceColumns)
    columns.forEach(item => {
      if(lockTypes.includes(item.type)) {
        initLockColumns.push(item)
      } else {
        initCustomColumns.push(item)
      }
    })
    lockColumns.value = initLockColumns
    customColumns.value = initCustomColumns
  }
  initColumns();

  const commonCustom = useTableCustom(TableRef, customColumns)

  // 开启弹窗
  const openDialog = () => {
    initColumns()
    dialogVisible.value = true
  }


  const getCustomColumns = (): TableColumnItem[] => {
    return [...lockColumns.value, ...customColumns.value]
  }

  // 保存配置
  const saveConfig = () => {
    emit('update:custom-columns', getCustomColumns())
    dialogVisible.value = false
  }


  // VueDraggableProps 拖拽组件参数
  const drag: VueDraggableProps = {

    onMove: (event, originalEvent) => {
        // console.log('移动')
        // console.log(event)
    },
    onUpdateList: (newList, event) => {

    },
  }


  defineExpose({
    openDialog,
    getCustomColumns
  })


</script>

